<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-5.3.0-dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1 class="text-center">用户注册</h1>
    <form class="needs-validation" novalidate>
      <div class="row my-2">
        <label class="col-form-label col-form-label-lg col-sm-3" for="username">用户名：</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" id="username" required>
          <div class="invalid-feedback"></div>
          <div class="valid-feedback"></div>
        </div>
      </div>
      <div class="row mb-2">
        <label class="col-form-label col-form-label-lg col-sm-3" for="password">密码：</label>
        <div class="col-sm-9">
          <input type="password" class="form-control" id="password" required>
          <div class="invalid-feedback"></div>
          <div class="valid-feedback"></div>
        </div>
      </div>
      <div class="row mb-2">
        <label class="col-form-label col-form-label-lg col-sm-3" for="confirmPassword">确认密码：</label>
        <div class="col-sm-9">
          <input type="password" class="form-control" id="confirmPassword" required>
          <div class="invalid-feedback"></div>
          <div class="valid-feedback"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 text-center">
          <button type="submit" class="text-white bg-primary border-0 rounded-1 px-5 py-2">注册</button>
        </div>
      </div>
    </form>
  </div>
  <script src="bootstrap-5.3.0-dist/js/bootstrap.min.js"></script>
  <script>
    // 获取表单字段并监听用户输入事件
    var form = document.querySelector('form');
    var usernameInput = document.getElementById('username');
    var passwordInput = document.getElementById('password');
    var confirmPasswordInput = document.getElementById('confirmPassword');
    usernameInput.addEventListener('input', function () {
      validateUsername();
    });
    passwordInput.addEventListener('input', function () {
      validatePassword();
    });
    confirmPasswordInput.addEventListener('input', function () {
      validateConfirmPassword();
    });
    // 编写用户名验证函数
    function validateUsername () {
      var username = usernameInput.value;
      if (username === '') {
        showInvalidFeedback('username', '请输入有效的用户名');
      } else if (!isValidName(username)) {
        showInvalidFeedback('username', '用户名必须由3到20个字符组成');
      } else {
        showValidFeedback('username', '用户名可用');
      }
    }
    function showInvalidFeedback (fieldName, message) {
      var field = document.getElementById(fieldName);
      field.classList.remove('is-valid');
      field.classList.add('is-invalid');
      field.nextElementSibling.innerText = message;
    }
    function showValidFeedback (fieldName, message) {
      var field = document.getElementById(fieldName);
      field.classList.remove('is-invalid');
      field.classList.add('is-valid');
      field.nextElementSibling.nextElementSibling.innerText = message;
    }
    function isValidName (username) {
      var usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
      return usernameRegex.test(username);
    }
    // 编写密码和确认密码的验证函数
    function validatePassword () {
      var password = passwordInput.value;
      if (password === '') {
        showInvalidFeedback('password', '请输入密码');
      } else if (!isValidPassword(password)) {
        showInvalidFeedback('password', '密码长度应该至少为6个字符');
      } else {
        showValidFeedback('password', '密码可用');
      }
    }
    function validateConfirmPassword () {
      var confirmPassword = confirmPasswordInput.value;
      var password = passwordInput.value;
      if (confirmPassword === '') {
        showInvalidFeedback('confirmPassword', '请再次输入密码');
      } else if (password !== confirmPassword) {
        showInvalidFeedback('confirmPassword', '两次密码输入不一致');
      } else {
        showValidFeedback('confirmPassword', '密码输入正确');
      }
    }
    function isValidPassword (password) {
      var passwordRegex = /^.{6,}$/;
      return passwordRegex.test(password);
    }
    // 编写表单提交事件的逻辑
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      validateUsername();
      validatePassword();
      validateConfirmPassword();
    });
  </script>
</body>
</html>